<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=width-device,initial-scale=1.0" />
		<title>更新商品</title>
		<link rel="stylesheet" type="text/css" href="js/bootstrap/css/bootstrap.css" />
		<script type="text/javascript" src="js/vue2.5.js" ></script>
		<script src="js/axios.min.js"></script>
		<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
		<script type="text/javascript" src="js/global.js"></script>
		<script type="text/javascript" src="js/bootstrap/js/bootstrap.js"></script>
		<script src="js/layer/layer.js"></script>
		<script src="js/param.js"></script>
	</head>

	<body>
		<div class="container">
			<form id="form1" class="form-horizontal">
				<div class="form-group">
					<label for="" class="col-sm-2">商品名</label>
					<div class="col-sm-8">
						<input type="text" id="gname" name="gname"  v-model="goods.gname" class="form-control" />
					</div>
				</div>
				
				
				<div class="form-group">
					<label for="" class="col-sm-2">增加数量</label>
					<div class="col-sm-8">
						<input type="text" id="gcount" name="gcount"  class="form-control" placeholder="填入增加的数量" />
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-offset-2 col-sm-8">
						<input type="hidden" id="gid" name="gid" />
						<input type="button" value="进货" class="btn btn-success" id="updateBtn" @click="update()" />
						<input type="button" value="取消" class="btn btn-warning" onclick="window.parent.layer.closeAll();" />
					</div>
				</div>
			</form>
		</div>

		<script>
			//获得传递过来的商品编号
			var gid = getParam('gid');
			//表单验证函数
			function checkForm() {

				var gdesc = $('#gdesc');
				var gprice = $('#gprice');

				//验证商品描述
				if (gdesc.val() == '' ) {
					layer.msg('商品描述不能为空');
					gdesc.focus();
					return false;
				}
				//验证价格
				if (gprice.val() == '' ) {
					layer.msg('商品价格不能为空');
					gprice.focus();
					return false;
				}
				return true;
			}
			
			//vue
			var vue = new Vue({
				el:'.container',
				data:{
					goods:{
						gid:'',
						gname:'',
						gcount:'',
						gdesc:'',
						gprice:'',
						gplace:''
					}
				},
				methods:{
					
					//表单回显
					get:function(){
						
						axios.get(baseUrl + '/goods/get',{
							params:{
								gid:gid
							}
						})
							.then(function(response) {
								this.goods.gid = response.data.gid;
								this.goods.gname = response.data.gname;
								this.goods.gcount = response.data.gcount;
								this.goods.gdesc = response.data.gdesc;
								this.goods.gprice = response.data.gprice;
								this.goods.gplace = response.data.gplace;
								
							}.bind(this))
							.catch(function(error) {
								layer.msg('请求失败');
							});
					},
					//更新数据
					update:function(){
						//调用表单验证
						if(!checkForm())
							return;
						this.goods.gcount= parseInt(this.goods.gcount) +parseInt($('#gcount').val());
						axios.post(baseUrl + '/goods/update', $.param(this.goods))
							.then(function(response) {
								layer.msg('更新成功');
								window.parent.layer.closeAll();
								
							})
							.catch(function(error) {
								layer.msg('请求失败');
								
							});
					}
					
				},
				mounted:function(){
					this.get();
				}
				
			});
			
		</script>

	</body>

</html>